<template>
  <div class="list-box" ref="listBox">
   <!-- 搜索区-->
    <div class="list-search">
      <div>
        标题：<el-input v-model="newsTitle" placeholder="请输入标题搜索" clearable class="list-search-input" @change="changeColumn()"></el-input>
        <span style="margin-left: 20px">供应商：</span>
        <el-select v-model="userSearch" placeholder="请选择" @change="changeColumn()">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in userList" :key="item.userId" :label="item.trueName" :value="item.userId"></el-option>
        </el-select>
      </div>
      <div class="list-search-box" style="margin-top: 20px">
        <span>栏目：</span>
        <el-radio-group v-model="columnSearch" @change="changeColumn()" style="width: 90%;">
          <el-radio label="">全部</el-radio>
          <el-radio v-for="item in columnList" :key="item.cId" :label="item.cId">{{item.columnTitle}}</el-radio>
        </el-radio-group>
      </div>
      <div class="list-search-box">
        状态：<el-radio-group v-model="useStateSearch" @change="changeColumn()">
          <el-radio label="">全部</el-radio>
          <el-radio label="2">待处理</el-radio>
          <el-radio label="1">采用发布</el-radio>
          <el-radio label="3">不采用</el-radio>
        </el-radio-group>
      </div>
    </div>


    <!--列表区-->
    <div class="list-table">
      <el-table :data="tableData" border :style="{width: '100%'}" v-loading="loading" :height="clientHeight">
        <el-table-column prop="newsTitle" label="主标题">
          <template slot-scope="scope">
            <span @click="onClickOpenChange(scope.row)" class="list-table-tit-hover">{{scope.row.newsTitle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="查看图片" width="100">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover">
              <img :src="scope.row.newsPicVedio_w" alt="" style="width:150px">
              <p slot="reference" class="list-table-watch-img">查看图片</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="columnTitle" label="所在栏目" width="100"></el-table-column>
        <el-table-column prop="newsType" label="类型" width="200"></el-table-column>
        <el-table-column prop="trueName" label="供应商" width="250"></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.useState==='1'?'success':scope.row.useState==='2'?'danger':'info'">{{scope.row.useState==='1'?'录用发布':scope.row.useState==='2'?'待处理':'不录用'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <div class="btn-box">
              <el-button class="list-table-button" type="success" size="mini" @click="setUseStateByNewsId(scope.row,1)" :disabled="scope.row.useState==='1'?true:false">录用</el-button>
              <el-button type="danger" size="mini" @click="setUseStateByNewsId(scope.row,3)" :disabled="scope.row.useState==='3'?true:false">不录用</el-button>
              <el-button :type="scope.row.isTop==='0'?'':'primary'" size="mini" @click="setIsTopByNewsId(scope.row)">{{scope.row.isTop==='0'?'取消置顶':'置顶'}}</el-button>
            </div>
            <div class="btn-box">
              <el-button type="primary" size="mini" @click="onClickPreview(scope.row)">预览</el-button>
              <el-button type="primary" size="mini" @click="onClickOpenChange(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="onClickOpenDelete(scope.row)">删除</el-button>
            </div>
            
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页区-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="list-pagination"
      :pageSize="pageSize"
      @current-change="changePage">
    </el-pagination>


  </div>
</template>

<script>
  import phone from '../components/phone'
    export default {
      name: "zlhwList",
      components:{
        phone
      },
      props:{
        userList:{
          type:Array
        },
        columnList:{
          type:Array
        },
        clientHeight:{
          type:String
        }
      },
      data(){
          return{
            newsTitle:'',//标题搜索
            columnSearch:'',//栏目搜索
            userSearch:'',//供应商搜索
            useStateSearch:'1',//状态搜索

            tableData:[],

            currIndex:1,
            pageSize:8,
            total:0,
            loading:false,//是否开启加载
            rules:{

            }
          }
      },
      created(){
        this.getUserList();
      },
      methods:{
        //获取列表
        getUserList(){
          this.loading = true;
          this.$axios.getZlhwList({
            "currIndex":this.currIndex,
            "pageSize":this.pageSize,
            "cId":this.columnSearch,
            "newsTitle":this.newsTitle,
            "userId":this.userSearch,
            "useState":this.useStateSearch
          }).then(res=>{
            if (res.data.code==='0'){
              //console.log(res.data.data[0]);
              let list = res.data.data[0];
              this.total = list.totalCount;
              this.tableData = list.newsList;
              let t = setTimeout(()=>{
                this.loading = false;
                clearTimeout(t);
              },500)
            }else{
              this.$message.error('获取文章列表失败！');
            }
          })
        },
        //修改栏目
      changeColumn(){
        this.currIndex = 1;
        this.getUserList();
      },
        //打开修改窗口
        onClickOpenChange(row){
          this.$router.push({
            path:'/addArticle/' + row.newsId,
          })
          let tabsList = JSON.parse(sessionStorage.getItem('tabsList'));
          tabsList.push({tit:`“${row.newsTitle}”文章修改`,route:'/addArticle/' + row.newsId});
          this.$emit('openAdd',tabsList);
        },
        //切换页码
        changePage(p){
          this.currIndex = p;
          this.getUserList();
        },
        //打开删除框
        onClickOpenDelete(row){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            this.$axios.deleteNewsInfo({
              "newsId":row.newsId
            }).then((res)=>{
              if (res.data.code==='1') return;
              this.getUserList();
              this.$message.success('删除成功！');
            }).catch(()=>{this.$message.error('连接服务器失败，请检查网络！')})
          })
        },
        //采用不采用
        setUseStateByNewsId(row,type){
          this.$axios.setListByNewsId({
            "newsId":row.newsId,
            "useState":type,
          }).then((res)=>{
            if (res.data.code==='1') return;
            this.getUserList();
          }).catch(()=>{this.$message.error('连接失败，请检查你的网络！')})
        },
        //置顶
        setIsTopByNewsId(row){
          this.$axios.setListByNewsId({
            "newsId":row.newsId,
            "isTop":row.isTop==='0'?'1':'0'
          }).then((res)=>{
            if (res.data.code==='1') return;
            this.getUserList();
          }).catch(()=>{this.$message.error('连接失败，请检查你的网络！')})
        },
        //点击预览
        onClickPreview(row){
          if (!row.newsUrl) {
            this.$message.warning('暂无链接！');
            return;
          };
          window.open(row.newsUrl);
        }
      }
    }
</script>

<style scoped lang="scss">
  .list-box{
    background: #fff;
    height: 100%;
    width: 100%;
    padding: 30px;
    font-size: 14px;
    .list-search-box{
      display: flex;
      flex-flow: row nowrap;
      align-items:flex-start;
    }
    .list-search-input{
      width: 300px;
    }
    .list-table{
      margin: 10px 0;
      .list-table-tit-hover{
        &:hover{
          cursor: pointer;
        }
      }
      .list-table-button{
        margin-bottom: 10px;
      }
      .list-table-watch-img{
        cursor: pointer;
      }
    }
    .list-pagination{
      float: right;
      height: 50px;
    }
    .list-dialog-input{
      max-width: 500px;
    }
    .list-dialog-divider{
      margin-top: 50px;
    }
    .list-add{
      float: right;
    }
  }
</style>
